<template>
  <div class="operateActivity">
    <section class="defaultcommodity" :style="{ background: datas.bgcolors }">
      <div class="activetitle">
        <div class="titlecont">
          <img v-if="!datas.titlePic" src="../../../assets/images/active.png" alt="">
          <img v-else :src="datas.titlePic" alt="">
          <p>{{ datas.title }}</p>
          <span>{{ datas.activeFlag }}</span>
        </div>
        <div class="titletime">
          <p>距活动结束<span>03</span>天<span>09</span>:<span>22</span>:<span>18</span></p>
          <div class="status">进行中</div>
        </div>
      </div>
      <!-- 无内容样式 -->
      <div
        class="defaultcommodityList"
        v-show="!datas.imageList || !datas.imageList[0]"
        :class="[
        datas.commodityType === 0 ? 'defaultcommodityList0' : '', 
        datas.commodityType === 1 ? 'defaultcommodityList1' : '' 
        ]">
        <div class="contentlist" v-for="index in 3" :key="index">
          <div class="imgtop">
            <img class="suoluetu" draggable="false" src="../../../assets/images/imgs.png" alt="" />
            <div class="topflag" v-show="datas.commodityType === 1">限时折扣</div>
            <div class="vipicon"><img src="../../../assets/images/jiaobiao.png" alt=""></div>
            <div class="dianz">
              <img src="../../../assets/images/play.png" alt="">
              <span>{{ datas.count }}万</span>
            </div>
          </div>
          <div class="contBottom">
            <div class="bottitle">
              <p>内容标题</p>
              <span>这是学科描述展示</span>
            </div>
            <div class="botflag" v-show="datas.commodityType === 0">
              <span>标签名称1</span>
              <span>标签名称2</span>
            </div>
            <div class="botprice">
              <p><span>￥</span>19.9</p>
              <div class="button-bot" v-show="datas.commodityType === 0">立即抢购</div>
              <div class="button-bot" v-show="datas.commodityType === 1">抢</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 有内容样式 -->
      <div
        class="defaultcommodityList"
        v-show="datas.imageList || datas.imageList[0]"
        :class="[
        datas.commodityType === 0 ? 'defaultcommodityList0' : '', 
        datas.commodityType === 1 ? 'defaultcommodityList1' : '' 
        ]">
        <div class="contentlist" v-for="(item,index) in datas.imageList" :key="index">
          <div class="imgtop">
            <img class="suoluetu" draggable="false" :src="item.src" alt="" />
            <div class="topflag" v-show="datas.commodityType === 1">
              <span v-if="item.hasOwnProperty('flagTagsArr')">{{ item.flagTagsArr[0] }}</span>
            </div>
            <div class="vipicon" v-show="item.isVipShow === 1">
              <img src="../../../assets/images/jiaobiao.png" alt="">
            </div>
            <div class="dianz">
              <img src="../../../assets/images/play.png" alt="">
              <span>{{ datas.count }}万</span>
            </div>
          </div>
          <div class="contBottom">
            <div class="bottitle">
              <p>{{ item.text }}</p>
              <span>{{ item.desc }}</span>
            </div>
            <div class="botflag" v-show="item.flag && datas.commodityType === 0">
              <span v-for="(ite, ind) in ((item.flag).split(','))" :key="ind">{{ ite }}</span>
            </div>
            <div class="botprice" v-show="item.showPrice === 1">
              <p><span>￥</span>19.9</p>
              <div class="button-bot" v-show="datas.commodityType === 0">{{ item.btnText || '立即抢购' }}</div>
              <div class="button-bot" v-show="datas.commodityType === 1">{{ item.btnText || '抢' }}</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 组件操作 -->
    <slot name="deles" />
  </div>
</template>
<script>
export default {
  name: "operateActivity",
  props: {
    datas: Object,
  },
};
</script>
<style lang="scss" scoped>
.operateActivity {
  position: relative;
  .defaultcommodity{
    width: 375px;
    // height: 352px;
    background: linear-gradient(180deg, #FF5F54 0%, #FFDAD2 100%);
    border-radius: 8px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    .activetitle{
      padding: 16px;
      .titlecont{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        img{
          width: 20px;
          height: 20px;
        }
        p{
          font-size: 20px;
          font-family: MiSans-Bold, MiSans;
          font-weight: bold;
          color: #FFFFFF;
          margin: 0 10px;
        }
        span{
          width: 128px;
          height: 18px;
          background: #FFFFFF;
          border-radius: 27px 27px 27px 27px;
          font-size: 12px;
          font-family: MiSans-Regular, MiSans;
          font-weight: 400;
          color: #FF6254;
          text-align: center;
          display: block;
          line-height: 18px;
          padding: 3px 5px;
        }
      }
      .titletime{
        display: flex;
        align-items: center;
        justify-content: space-between;
        p{
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          span{
            width: 28px;
            height: 16px;
            background: #FFFFFF;
            border-radius: 16px;
            font-size: 12px;
            font-family: MiSans-Semibold, MiSans;
            font-weight: 600;
            color: #FF6554;
            line-height: 16px;
            padding: 5px 10px;
            margin: 0 5px;
          }
        }
        .status{
          width: 44px;
          height: 16px;
          border-radius: 30px 30px 30px 30px;
          border: 1px solid #FFFFFF;
          font-size: 10px;
          font-family: MiSans-Regular, MiSans;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 16px;
          text-align: center;
          padding: 3px 8px;
        }
      }
    }
    .defaultcommodityList{
      position: relative;
      display: flex;
      &.defaultcommodityList0{
        margin-left: 16px;
        overflow-x: scroll;
        /* 滚动条 */
        &::-webkit-scrollbar {
          height: 5px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #FF5F54;
          border-radius: 5px;
        }
        .contentlist{
          width: 140px;
          // height: 250px;
          background: #FFFFFF;
          border-radius: 8px;
          margin-right: 10px;
          .imgtop{
            width: 140px;
            height: 140px;
            position: relative;
            .suoluetu{
              border-radius: 8px 8px 0px 0px;
              width: 100%;
              height: 100%;
            }
            .topflag{
              width: 52px;
              height: 16px;
              padding: 3px 5px;
              background: linear-gradient(165deg, #FF9052 0%, #FF5757 100%);
              border-radius: 0px 0px 9px 0px;
              font-size: 10px;
              font-family: MiSans-Medium, MiSans;
              font-weight: 500;
              line-height: 16px;
              color:#FFFFFF;
              text-align: center;
              position: absolute;
              left: 0;
              top: 0;
            }
            .vipicon{
              position: absolute;
              right: 0;
              top: 0;
              width: 24px;
              height: 18px;
              img{
                width: 100%;
                height: 100%;
                border-top-right-radius: 8px;
              }
            }
            .dianz{
              width: 60px;
              height: 20px;
              background: rgba(0,0,0,0.33);
              border-radius: 60px;
              position: absolute;
              right: 10px;
              bottom: 10px;
              display: flex;
              align-items: center;
              img{
                width: 12px;
                height: 12px;
                display: block;
                margin: 0 5px;
              }
              span{
                font-size: 12px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
              }
            }
          }
          .contBottom{
            padding: 10px;
            .bottitle{
              p{
                font-size: 16px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(0,0,0,0.85);
                // line-height: 0;
                overflow: hidden;
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
              }
              span{
                font-size: 12px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0,0,0,0.5);
                overflow: hidden;
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
              }
            }
            .botflag{
              display: flex;
              align-items: center;
              margin-top: 10px;
              span{
                width: 53px;
                height: 16px;
                background: #EAEAEA;
                border-radius: 10px;
                display: block;
                text-align: center;
                line-height: 16px;
                margin-right: 6px;
                font-size: 12px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #808080;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                padding: 3px 5px;
              }
            }
            .botprice{
              display: flex;
              align-items: center;
              justify-content: space-between;
              p{
                font-size: 18px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #F35C6D;
                line-height: 0;
                span{
                  font-size: 14px;
                }
              }
              .button-bot{
                width: 63px;
                height: 20px;
                background: linear-gradient(140deg, #FFA552 0%, #FF5757 100%);
                border-radius: 50px;
                font-size: 11px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 20px;
                text-align: center;
              }
            }
          }
        }
      }
      &.defaultcommodityList1{
        margin-left: 16px;
        .contentlist{
          width: 107px;
          // height: 250px;
          background: #FFFFFF;
          border-radius: 8px;
          margin-right: 10px;
          &:nth-child(3n) {
            margin-right: 0 !important;
          }
          .imgtop{
            width: 107px;
            height: 107px;
            position: relative;
            .suoluetu{
              border-radius: 8px 8px 0px 0px;
              width: 100%;
              height: 100%;
            }
            .topflag{
              width: 52px;
              height: 16px;
              padding: 3px 5px;
              background: linear-gradient(165deg, #FF9052 0%, #FF5757 100%);
              border-radius: 0px 0px 9px 0px;
              font-size: 10px;
              font-family: MiSans-Medium, MiSans;
              font-weight: 500;
              line-height: 16px;
              color:#FFFFFF;
              text-align: center;
              position: absolute;
              left: 0;
              top: 0;
            }
            .vipicon{
              position: absolute;
              right: 0;
              top: 0;
              width: 24px;
              height: 18px;
              img{
                width: 100%;
                height: 100%;
                border-top-right-radius: 8px;
              }
            }
            .dianz{
              width: 60px;
              height: 20px;
              background: rgba(0,0,0,0.33);
              border-radius: 60px;
              position: absolute;
              right: 10px;
              bottom: 10px;
              display: flex;
              align-items: center;
              img{
                width: 12px;
                height: 12px;
                display: block;
                margin: 0 5px;
              }
              span{
                font-size: 12px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
              }
            }
          }
          .contBottom{
            padding: 10px;
            .bottitle{
              p{
                font-size: 16px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(0,0,0,0.85);
                line-height: 1;
              }
              span{
                font-size: 12px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0,0,0,0.5);
              }
            }
            .botflag{
              display: flex;
              align-items: center;
              margin-top: 10px;
              span{
                width: 53px;
                height: 16px;
                background: #EAEAEA;
                border-radius: 10px;
                display: block;
                text-align: center;
                line-height: 16px;
                margin-right: 6px;
                font-size: 12px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #808080;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                padding: 3px 5px;
              }
            }
            .botprice{
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 94px;
              height: 20px;
              background: #FFEDD8;
              border-radius: 12px;
              margin-top: 10px;
              p{
                font-size: 14px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #F35C6D;
                line-height: 0;
                margin-left: 5px;
                span{
                  font-size: 11px;
                }
              }
              .button-bot{
                width: 30px;
                height: 20px;
                background: linear-gradient(165deg, #FF9052 0%, #FF5757 100%);
                border-radius: 39px;
                font-size: 11px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
                line-height: 20px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
